<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>projection Texture demo</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
    </style>
    <script src="./three.js"></script>
    <script src="./OrbitControls.js"></script>
  </head>
  <body></body>
  <script type="x-shader/x-vertex" id="v">
    uniform mat4 baisMatrix;
    uniform mat4 projProjMatrix;
    uniform mat4 projViewMatrix;

    varying vec4 vUv;
    void main() {
      
      vUv = baisMatrix * projProjMatrix * projViewMatrix * modelMatrix * vec4( position, 1.0 );
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  </script>
  <script type="x-shader/x-vertex" id="f">
   
    #ifdef GL_ES
      precision mediump float;
    #endif
    varying vec4 vUv;
    uniform sampler2D tDiffuse;
    void main() {

      vec4 base = texture2DProj( tDiffuse, vUv );
      gl_FragColor = vec4(base.xyz, 1.0);
    }
  </script>

  <script>
    var scene, camera, renderer, clock, controller;
    var texture, textureMatrix, mesh

    init();
    animate();

    // - Functions -
    function init() {
      scene = new THREE.Scene();
      clock = new THREE.Clock();
      camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );
      camera.position.set(-30, 50, 50);
      scene.add(camera)

      projCamera = new THREE.PerspectiveCamera(
        45,
        1,
        0.1,
        100
      )
      projCamera.position.set(20, 20, 20);
      projCamera.lookAt(0, 0, 0)
      scene.add(projCamera)
      var helper = new THREE.CameraHelper( projCamera );
      scene.add( helper );

      renderer = new THREE.WebGLRenderer({
        antialias: true, // 开启抗锯齿处理
        alpha: true,
      });
      renderer.setSize(window.innerWidth, window.innerHeight);

      var geometry = new THREE.PlaneBufferGeometry( 20, 20);
      var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
      mesh = new THREE.Mesh( geometry, material );
      mesh.rotation.x = -Math.PI/2
      scene.add( mesh );

      baisMatrix = new THREE.Matrix4()
      baisMatrix.set(
        0.5, 0.0, 0.0, 0.5,
        0.0, 0.5, 0.0, 0.5,
        0.0, 0.0, 0.5, 0.5,
        0.0, 0.0, 0.0, 1.0
      )

      texture = new THREE.TextureLoader().load("./girl.png", function() {
        textureShader = new THREE.ShaderMaterial({
          uniforms: {
            'baisMatrix': {
              type: 'm4',
              value: baisMatrix
            },
            'projProjMatrix': {
              type: 'm4',
              value: projCamera.projectionMatrix.clone()
            },
            'projViewMatrix': {
              type: 'm4',
              value: projCamera.matrixWorldInverse.clone()
            },
            'tDiffuse': {
              type: 't',
              value: texture
            },
          },
          vertexShader: document.getElementById( 'v' ).textContent,
          fragmentShader: document.getElementById( 'f' ).textContent,
        })
        mesh.material = textureShader

        renderer.render(scene, camera);
      })
      
      controller = new THREE.OrbitControls(camera, renderer.domElement);
      document.body.appendChild(renderer.domElement);
      window.onresize = onResize;

    }

    function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
      controller.update(clock.getDelta());
      
      if(mesh) {
        mesh.rotation.z += 0.01
      }
    }

    function onResize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    }
  </script>
</html>
